<template>
  <div class="app">
    <div class="scroll-container">
      <van-search v-model="value" shape="round" background="#1988fb" placeholder="请输入搜索关键词" />
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
      <van-cell-group style="margin-top: 10px;">
        <div style="display: flex;">
          <van-field v-model="startAddress" label="出发地点:" placeholder="请输入出发地" />
          <van-button type="primary" style="width: 30%;" @click="virtualPositioning()">虚拟定位</van-button>
        </div>
      </van-cell-group>
      <van-cell-group style="margin-top: 10px;">
        <van-field v-model="startTime" label="出发时间:" placeholder="请输入出发时间" />
      </van-cell-group>
      <van-cell-group style="margin-top: 10px;">
        <van-field v-model="endTime" label="结束时间:" placeholder="请输入结束时间" />
      </van-cell-group>
      <van-cell-group style="left: 15px;margin-top: 15px;">
        <div style="display: flex;">
          <span style="font-size: 14px;margin-top: 5px;">价格区间:</span>
          <van-cell-group style="left: 10%;display: flex;">
            <van-stepper v-model="minMoney" integer />
            <van-tag type="success">元</van-tag>

          </van-cell-group>
          <van-cell-group style="left: 15%;display: flex;">
            <van-stepper v-model="maxMoney" integer />
            <van-tag type="success">元</van-tag>

          </van-cell-group>
        </div>
      </van-cell-group>
      <van-cell-group>
        <van-field v-model="jkJl" label="接客距离:" placeholder="请输入接客距离" />
        <van-field v-model="zdjl" label="终点距离:" placeholder="请输入终点距离" />
      </van-cell-group>
      <van-cell-group>
        <van-field v-model="zdcs" label="指定城市:" placeholder="多个城市使用#号分割开." />
      </van-cell-group>
      <van-cell-group style="left: 15px;margin-top: 15px;">
        <div style="display: flex;">
          <van-checkbox v-model="dxCheckBox" shape="square">
          </van-checkbox>
          <van-icon name="smile" size="25px" dot color="#1988fb" />
          <van-tag type="primary" style="left: 5px;">独享</van-tag>
          <van-cell-group style="left: 12%;display: flex;">
            <van-stepper v-model="minDxPerson" theme="round" button-size="22" disable-input />
          </van-cell-group>
          <van-cell-group style="left: 20%;display: flex;">
            <van-stepper v-model="maxDxPerson" theme="round" button-size="22" disable-input />
          </van-cell-group>
        </div>
      </van-cell-group>
      <van-cell-group style="left: 15px;margin-top: 15px;">
        <div style="display: flex;">
          <van-checkbox v-model="pcCheckBox" shape="square">
          </van-checkbox>
          <van-icon name="friends" size="25px" color="#2eaa6b" dot />
          <van-tag type="success" style="left: 5px;">拼车</van-tag>
          <van-cell-group style="left: 12%;display: flex;">
            <van-stepper v-model="minPcPerson" theme="round" button-size="22" disable-input />
          </van-cell-group>
          <van-cell-group style="left: 20%;display: flex;">
            <van-stepper v-model="maxPcPerson" theme="round" button-size="22" disable-input />
          </van-cell-group>
        </div>
      </van-cell-group>
      <van-cell-group style="left: 15px;margin-top: 15px;">
        <div style="display: flex;">
          <van-checkbox v-model="zqJtCheckBox" shape="square">
          </van-checkbox>
          <van-icon name="hot" size="25px" color="#c31d31" dot />
          <van-tag type="danger" style="left: 5px;">只抢今日订单</van-tag>
        </div>
      </van-cell-group>
      <van-cell-group style="left: 15px;margin-top: 10px;">
        <div style="display: flex;">
          <van-checkbox v-model="lxQdCheckBox" shape="square">
          </van-checkbox>
          <van-tag type="warning" style="left: 5px;">连续抓单,成功抢单后自动停止</van-tag>
        </div>
      </van-cell-group>
      <van-cell-group style="left: 15px;margin-top: 10px;">
        <div style="display: flex;">
          <van-checkbox v-model="gbzhsxCheck" shape="square">
          </van-checkbox>
          <van-tag type="danger" style="left: 5px;">关闭主号刷新,无小号请勿勾选我.</van-tag>
        </div>
      </van-cell-group>
      <van-cell-group style="margin-top: 10px;">
        <van-field v-model="sx" label="刷新延时" placeholder="请输入刷新延时" />
      </van-cell-group>
      <!-- 设置刷新规则 -->
      <el-link type="primary" style="margin-left: 4%;">非白号推荐刷新100 刷5秒停2秒</el-link>
      <div style="display: flex;margin-left: 4%;">
        <span style="font-size: 15px;margin-top: 5px;">防白每刷:</span><van-stepper v-model="sxJG" step="1" min="0" />
        <span style="font-size: 15px;margin-top: 3px;">秒停:</span><van-stepper v-model="sxTZ" step="1" min="0" />
        <span style="font-size: 15px;margin-top: 3px;">秒</span>
      </div>
      <van-button type="info" style="width: 95%;left: 8px;" @click="startQd()">{{ buttonTitle }}</van-button>
      <div style="padding-bottom:100px ;"></div>
      <van-tabbar v-model="active">
        <van-tabbar-item replace to="/home" name="home" icon="wap-home">抢单首页</van-tabbar-item>
        <van-tabbar-item replace to="/order" name="search" icon="cash-back-record">订单记录</van-tabbar-item>
        <van-tabbar-item replace to="/my" name="setting" icon="user">个人中心</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import { request } from "../network/requst";
import { Button, Dialog } from "vant";

export default {
  data() {
    return {
      buttonTitle: "开始抢单",
      Maintoken: "",
      // 请求参数封装
      startAddress: "广东省深圳市宝安区",
      startTime: "2024-09-01 12:50",
      endTime: "2024-09-02 12:50",
      minMoney: "100",
      maxMoney: "9999",
      jkJl: "50",
      lxQdCheckBox: false,
      pcCheckBox: false,
      minPcPerson: 3,
      maxPcPerson: 4,
      dxCheckBox: true,
      minDxPerson: 3,
      maxDxPerson: 4,
      zqJtCheckBox: false,
      gbzhsxCheck: false,
      lat: "",
      lng: "",
      cityId: "",
      city: "",
      sx: "1000",
      zdcs: "",
      sxJG: 0,
      sxTZ: 0,
      zdjl: "9999",
      // 底部菜单切换
      active: 0,
      // 下拉框
      value1: 0,
      value2: 'a',
      option1: [
        { text: '请选择刷单模式', value: 0 },
        { text: '大厅', value: 1 },
        { text: '行程', value: 2 },
      ],
      option2: [
        { text: '请选择排序规则', value: 'a' },
        { text: '智能排序', value: 'b' },
        { text: '价格最高', value: 'c' },
        { text: '时间最早', value: 'd' },
        { text: '距离最近', value: 'e' },
      ],
    };
  },
  created() {
    // 获取配置文件
    request({
      url: "/config/getUserConfig",
      params: {},
    }).then((res) => {
      if (res.data.code == 200 && res.data.data.code != 500) {
        this.startAddress = res.data.data.data.startAddress;
        this.startTime = res.data.data.data.startTime;
        this.endTime = res.data.data.data.endTime;
        this.minMoney = res.data.data.data.minMoney;
        this.maxMoney = res.data.data.data.maxMoney;
        this.jkJl = res.data.data.data.jkJl;
        this.lxQdCheckBox =
          res.data.data.data.lxQdCheckBox == "true" ? true : false;
        this.pcCheckBox =
          res.data.data.data.pcCheckBox == "true" ? true : false;
        this.minPcPerson = res.data.data.data.minPcPerson;
        this.maxPcPerson = res.data.data.data.maxPcPerson;
        this.dxCheckBox =
          res.data.data.data.dxCheckBox == "true" ? true : false;
        this.minDxPerson = res.data.data.data.minDxPerson;
        this.maxDxPerson = res.data.data.data.maxDxPerson;
        this.zqJtCheckBox =
          res.data.data.data.zqJtCheckBox == "true" ? true : false;
        this.value1 = res.data.data.data.value1 == null ? 0 : res.data.data.data.value1;
        this.value2 = res.data.data.data.value2 == null ? 'a' : res.data.data.data.value2;
        this.gbzhsxCheck = res.data.data.data.gbzhsxCheck == "true" ? true : false;

        this.sxJG = res.data.data.data.sxJg;
        this.sxTZ = res.data.data.data.sxTz;
        this.sx = res.data.data.data.sx == null ? "1000" : res.data.data.data.sx;

      } else {
        Dialog.alert({
          title: "消息提示",
          message: res.data.data.message,
          theme: "round-button",
        });
        return;
      }
    });
    // 获取token和按钮状态
    request({
      url: "/config/getMainTokenAndButtonStatus",
      params: {},
    }).then((res) => {
      if (res.data.code == 200) {
        this.Maintoken = res.data.data.data.token;
        this.buttonTitle = res.data.data.data.buttonStatus;
        // 封装城市信息
        this.cityId = res.data.data.data.cityId;
        this.cityName = res.data.data.data.cityName;
        this.lat = res.data.data.data.lat;
        this.lng = res.data.data.data.lng;
      }
    });
  },
  methods: {
    // 抢单按钮事件
    startQd() {
      if (this.cityId == "") {
        Dialog.alert({
          title: "消息提示",
          message: "请先定位城市",
          theme: "round-button",
        });
        return;
      }
      // 判断刷到模式
      if (this.value1 == "0") {
        Dialog.alert({
          title: "消息提示",
          message: "请选择刷单模式",
          theme: "round-button",
        });
        return;
      }
      // 判断排序模式
      if (this.value2 == "a") {
        Dialog.alert({
          title: "消息提示",
          message: "请选择排序规则",
          theme: "round-button",
        });
        return;
      }
      request({
        url: "/threadManager/startOrEndThread",
        params: {
          startAddress: this.startAddress,
          startTime: this.startTime,
          endTime: this.endTime,
          minMoney: this.minMoney,
          maxMoney: this.maxMoney,
          jkJl: this.jkJl,
          lxQdCheckBox: this.lxQdCheckBox,
          pcCheckBox: this.pcCheckBox,
          minPcPerson: this.minPcPerson,
          maxPcPerson: this.maxPcPerson,
          dxCheckBox: this.dxCheckBox,
          minDxPerson: this.minDxPerson,
          maxDxPerson: this.maxDxPerson,
          zqJtCheckBox: this.zqJtCheckBox,
          queryType: "0",
          sxNumber: this.sx,
          routeId: "0",
          cityId: this.cityId,
          cityName: this.city,
          lat: this.lat,
          lng: this.lng,
          value1: this.value1,
          value2: this.value2,
          zdcs: this.zdcs,
          sxJg: this.sxJG,
          sxTz: this.sxTZ,
          zdjl: this.zdjl,
          gbzhsxCheck: this.gbzhsxCheck,
          sx: this.sx
        },
      }).then((res) => {
        if (res.data.code == 200 || res.data.code == 500) {
          Dialog.alert({
            title: "消息提示",
            message: res.data.message,
            theme: "round-button",
          });
          if (res.data.code == 200) {
            // 获取token和按钮状态
            request({
              url: "/config/getMainTokenAndButtonStatus",
              params: {},
            }).then((res) => {
              if (res.data.code == 200) {
                this.Maintoken = res.data.data.data.token;
                this.buttonTitle = res.data.data.data.buttonStatus;
                // 封装城市信息
                this.cityId = res.data.data.data.cityId;
                this.cityName = res.data.data.data.cityName;
                this.lat = res.data.data.data.lat;
                this.lng = res.data.data.data.lng;
              }
            });
          }
        }
      });
    },
    // 虚拟定位
    virtualPositioning() {
      request({
        url: "/threadManager/virtualPositioning",
        params: { address: this.startAddress },
      }).then((res) => {
        if (res.data.code == 200) {
          this.cityId = res.data.data.cityId;
          this.city = res.data.data.city;
          this.lat = res.data.data.lat;
          this.lng = res.data.data.lng;
          Dialog.alert({
            title: "消息提示",
            message: "定位成功",
            theme: "round-button",
          });
        } else {
          Dialog.alert({
            title: "消息提示",
            message: "定位失败",
            theme: "round-button",
          });
        }
      });
    },
  },
};
</script>


<style scoped>
.rounded-border {
  background-color: #1879e7;
  /* 背景颜色 */
  border-radius: 20px;
  /* 圆角大小 */
  padding: 50px;
  /* 内边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

.app {
  /* 您想要的背景颜色 */
  height: 100%;
  /* 确保背景色填充整个页面 */
  width: 100%;
  position: fixed;
  /* 使div的大小与视窗大小一致 */
  overflow-y: auto;
  /* 垂直滚动 */
  -webkit-overflow-scrolling: touch;
  /* 移动端流畅滚动 */
  height: 100vh;
  /* 设置高度为视口高度，根据需要调整 */
}
</style>